<template>
    <div class="goods-info">
    <van-swipe>
    <van-swipe-item v-for="(item, index) in goodsinfo.album"
    :key="index">
    <img :src="item.img" style="width: 100vw; height: 
    auto" />
    </van-swipe-item>
    </van-swipe>
    <!-- 商品购买区域 -->
<van-list>
<van-cell>
<template #title>
<b>{{ goodsinfo.name }}</b>
</template>
</van-cell>
<van-cell>
<template #title>
<div class="price">
<b>定价：</b><span>¥{{ goodsinfo.price }}</span>
</div>
</template>
</van-cell>
<!-- 商品参数区域 -->
<van-cell>
<template #title> <b>商品卖点：</b>{{ 
goodsinfo.sell_point }} </template>
</van-cell>
<van-cell>
<template #title> <b>库存情况：</b>{{ goodsinfo.num }}件
</template>
</van-cell>
<van-cell>
<template #title> <b>上架时间：</b>{{ 
goodsinfo.create_time }}件 </template>
</van-cell>
<van-cell>
<template #title>
<b style="margin-right: 20px">购买数量:</b>
<van-stepper v-model="goodsNum" min="1"
:max="goodsinfo.num"></van-stepper>
</template>
</van-cell>
<van-cell>
<template #title>
<div v-if="goodsinfo.num" class="go-buy">
<van-button type="primary" size="small">⽴即购买
</van-button>
<van-button type="danger" size="small"
@click="addCart">加⼊购物⻋</van-button>
</div>
<div v-else>该商品暂时⽆货</div>
</template>
</van-cell>
</van-list>
</div>
</template>
<script setup>
import { getGoodsInfo } from '@/api/login.js'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showNotify } from 'vant'
import Cookies from 'js-cookie'
const router = useRouter()
//获取从动态路由接收的数据id
const props = defineProps(['id'])
let goodsinfo = ref('')
let goodsNum = ref(1)
onMounted(async () => {
const data = { id: props.id }
const res = await getGoodsInfo(data)
goodsinfo.value = res.data
console.log(goodsinfo)
})
const addCart = () => {
//如果⽤户没有登录，不允许购买或者加⼊购物⻋
if (Cookies.get('Token') == undefined) {
showNotify({ message: '你还没有登录，请先登录', type: 'danger'
})
router.push('/login')
 } else {
//const data = { id: props.id, count: goodsNum.value, 
selected: false }
 //加⼊购物⻋信息，本功能下节实现
 }

</script>
<style lang="scss" scoped>
.price {
span {
color: red;
font-size: 14px;
font-weight: bold;
 }
 }
</style>